<template>
	<div>
		<slot name="header">
			<h4 class="headerCss">{{comLan.total}}:{{value.length}}</h4>
		</slot>
		<u-table ref="table" :data="value" :use-virtual="useVirtual" v-bind="$props" v-on="$listeners">
			<!-- row-key="ID"-->
			<slot name="operationBefore"></slot>
			<slot name="operation">
				<u-table-column label="" width="40px" :show-overflow-tooltip="false" :render-header="renderHeader"
					align="center">
					<template v-slot="scope">
						<i class="el-icon-minus" :title="comLan.btnDel" @click="del(scope)"
							style="cursor: pointer;"></i>
					</template>
				</u-table-column>
			</slot>
			<slot name="operationAfter"></slot>
			<slot name="indexBefore"></slot>
			<slot name="index">
				<u-table-column :label="comLan.showIndex" type="index" width="60"></u-table-column>
			</slot>
			<slot name="indexAfter"></slot>
			<slot name="SysCustomerIDBefore"></slot>
			<slot name="SysCustomerID">
				<u-table-column prop="SysCustomerID" :label="keyLan['SysCustomerID']" width="150" align="left">
					<template v-slot="scope">
						<remoteselect v-model="scope.row.SysCustomerID" url="api/SysCustomer/ListSelect" value-label="SysCustomerName"
							value-key="SysCustomerID" query-key="selectIDName" :placeholder="replaceID(keyLan['SysCustomerID'])" style="width:150px;">
							<template v-slot="{ row }">
								{{row.SysCustomerName}}
							</template>
						</remoteselect>
					</template>
				</u-table-column>
			</slot>
			<slot name="SysCustomerIDAfter"></slot>
			<slot name="CardTypeBefore"></slot>
			<slot name="CardType">
				<u-table-column prop="CardType" :label="keyLan['CardType']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.CardType"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="CardTypeAfter"></slot>
			<slot name="IdCardBefore"></slot>
			<slot name="IdCard">
				<u-table-column prop="IdCard" :label="keyLan['IdCard']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.IdCard"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="IdCardAfter"></slot>
			<slot name="ReviewDateBefore"></slot>
			<slot name="ReviewDate">
				<u-table-column prop="ReviewDate" :label="keyLan['ReviewDate']" width="150" align="left">
					<template v-slot="scope">
						<el-date-picker v-model="scope.row.ReviewDate" type="date" :picker-options="pickerOptions">
						</el-date-picker>
					</template>
				</u-table-column>
			</slot>
			<slot name="ReviewDateAfter"></slot>
			<slot name="IdCardEndDateBefore"></slot>
			<slot name="IdCardEndDate">
				<u-table-column prop="IdCardEndDate" :label="keyLan['IdCardEndDate']" width="150" align="left">
					<template v-slot="scope">
						<el-date-picker v-model="scope.row.IdCardEndDate" type="date" :picker-options="pickerOptions">
						</el-date-picker>
					</template>
				</u-table-column>
			</slot>
			<slot name="IdCardEndDateAfter"></slot>
			<slot name="RemarkBefore"></slot>
			<slot name="Remark">
				<u-table-column prop="Remark" :label="keyLan['Remark']" width="150" align="left">
					<template v-slot="scope">
						<el-input type="textarea" :rows="2" v-model="scope.row.Remark" style="width: 100%;"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="RemarkAfter"></slot>
		</u-table>
		<slot name="footer"></slot>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import js from "@/Partial/SysCustomerIdCard/js.js";
	export default {
		name: "SysCustomerIdCardListEdit",
		mixins: [common.baseVM, js],
		computed: {},
		data() {
			return {
				model: {
					SysCustomerID: null,
					CardType: null,
					IdCard: null,
					ReviewDate: new Date(),
					IdCardEndDate: new Date(),
					Remark: null,
				}
			}
		},
		methods: {
			renderHeader(h, data) {
				return h("div",
					[
						h("i", {
								attrs: {
									class: "el-icon-plus",
									title: this.comLan.btnAdd,
									style: "cursor: pointer;"
								},
								on: {
									click: () => {
										this.add();
									}
								}
							},
							[''])
					]);
			},
			add() {
				var newOne = JSON.parse(JSON.stringify(this.model));
				this.value.push(newOne);
			},
			del(scope) {
				var name = scope.row.CardType;
				if (name == null) name = '';
				var msg = this.stringFormat(this.comLan.js["remove"], name);
				this.confirm(msg, () => {
					this.value.splice(scope.$index, 1);
				});
			}
		}
	}
</script>
